<template>
  <div>
    <div
      id="monthChart"
      ref="lineChart"
      style="width:100%;height:calc((90vh - 85px)/2)"
    />
  </div>
</template>
<script>
export default {
  // prettier-ignore
  props: {
    // y值
    month: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      options: {
        title: {
          text: '当月保养计划VS已保养次数',
          textStyle: {
            fontWeight: 'normal',
            color: '#fff',
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          data: ['保养计划', '已保养次数'],

          textStyle: {
            color: '#aaa',
          },
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,

            axisLine: {
              lineStyle: {
                color: '#eee',
              },
            },
            data: [
              '09-01',
              '09-02',
              '09-03',
              '09-04',
              '09-05',
              '09-06',
              '09-07',
            ],
          },
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#05318e',
              },
            },
          },
        ],
        series: [
          {
            name: '保养计划',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            smooth: true,
            emphasis: {
              focus: 'series',
            },
            data: [4, 2, 3, 1, 0, 2, 6],
          },
          {
            name: '已保养次数',
            type: 'line',
            stack: 'Total',
            smooth: true,
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: [2, 8, 1, 3, 5, 2, 1],
          },
        ],
      },
    }
  },
  mounted() {
    this.initChart()
  },
  components: {},

  watch: {
    month() {
      this.initChart()
    },
  },
  methods: {
    initChart() {
      const data1 = this.month.map((item) => {
        return item.title
      })
      const data2 = this.month.map((item) => {
        return item.num
      })
      const data3 = this.month.map((item) => {
        return item.numplan
      })
      const options = {
        title: {
          text: '当月保养计划VS已保养次数',
          textStyle: {
            fontWeight: 'normal',
            color: '#1ab6e9',
            fontSize: 11,
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          data: ['计划保养次数', '已保养次数'],
          right: '3%',
          itemWidth: 15,
          itemHeight: 9,

          textStyle: {
            color: '#aaa',
            fontSize: 9,
          },
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        grid: {
          top: '15%',
          left: '2%',
          right: '2%',
          bottom: '1%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              color: '#aaa',
              fontSize: 7,
              interval: 0,
            },
            axisLine: {
              lineStyle: {
                color: '#05318e',
              },
            },
            axisTick: {
              show: false,
            },
            data: data1,
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value} ',
              color: '#aaa',
              fontSize: 7,
            },
            splitLine: {
              // show: false,
              lineStyle: {
                // color: '#05318e',
                color: '#0e2b68',
              },
            },
          },
        ],
        series: [
          {
            name: '计划保养次数',
            type: 'line',
            color: '#20a3d4',
            // areaStyle: {},
            label: {
              //是否显示数值
              show: true,
              color: '#fff',
              fontSize: 9,
              position: 'top',
            },

            // smooth: true,
            // symbol: 'none',
            emphasis: {
              focus: 'series',
            },
            data: data3,
          },
          {
            name: '已保养次数',
            type: 'bar',
            color: '#2cd4aa',
            // smooth: true,  //折线拐点是否光滑
            // symbol: 'none',  //是否有节点
            label: {
              show: true,
              color: '#fff',
              fontSize: 9,
              position: 'top',
            },
            // areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: data2,
          },
        ],
      }
      const myChart = this.$echarts.init(this.$refs.lineChart)
      myChart.setOption(options)
    },
  },
}
</script>
